<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>dhtmlxGrid. Step-by-step Guide. Big Grid</title>
	<link rel="STYLESHEET" type="text/css" href="../common/styles.css">
	
</head>

<body>
      <h1 id="sc0p">dhtmlxGrid. Step-by-step Guide. Big grid</h1><br id="pfvg"><span id="x2lc"><u id="k-x2">
  by Ivan Petrenko<br id="se5i"></u></span><h2 id="i9bc">Introduction. What is this all about?</h2>I've deleted a file recently. In a few moments I understood that it was a mistake (not the only one that day, to be honest). One would think: "What can be easier?" Just double-click the Recycle Bin and... I 've been waiting for 3 minutes, scrolling down, waiting again. My file was among thousands of others (right, I know it would be good to empty the Recycle Bin sometimes) and it took Windows (! - not even the web application, but Windows Explorer) minutes before I could scroll to the very bottom until I found my file. And then I thought: this can never happen with <span id="x6-e"><b id="h4g1">dhtmlxGrid</b></span>!<br id="kdkf"><br id="xzua">Now I'm going to show you why.<br id="wvvy"><br id="idqk"><h2 id="d:1p">Real Introduction.</h2>Keeping&nbsp; thousands of records in grid is a common requirement for most business applications. These records can be goods, names of employees, invoices, customers, some history records, etc. They can also be files for sure...&nbsp;  So, if you are developing a web application with a grid, you definitely need a grid control that is able to display...let's say... the whole list of you wife's purchases for the last two months, or the list of all possible reasons you can invent in order not to work on Sunday (which are going to be really long lists).<br id="ul-u"><br id="l1r4"><span id="itup"><b id="cg::">dhtmlxGrid </b></span>is the very component you need! <br id="j8od"><br id="vkye">This step-by-step tutorial will let you load 50,000 records into your grid and still have it working fast.<br id="bifv"><br id="d3v1">Firstly, let me outline a problem. <br id="ua21"><br id="s3k.">For example, you load a dataset with 10,000 records. Let's make some calculations.<br id="wwmw">It takes a second to
load this dataset from the server to your browser (probably, it takes more or less time depending on your
connection speed), half a second to convert it to grid internal format, and 0.01 second to draw each row in the grid (all these figures are approximate,
but you get the idea, I hope).<br id="e5z5"><br id="x9b9">The result of our calculation is 1+0.5+0.01*10000 = 101,5. It comes out more than a minute. So, you can go to the kitchen to make a cup of coffee...
and even drink it if your computer is not fast enough. But why do you need to
wait for 10,000 records to be drawn? We
also think that you don't! You just need the first 100 rows to
start working with as it is this number of rows that is visible in the grid frame.&nbsp; <span id="kvao" style="background-color: rgb(255, 153, 0);"><br id="rncf"><br id="a:b4"><span id="vqjr" style="background-color: rgb(255, 255, 255);">So we added some ingenious code</span></span> to the
grid and called this new possibility "<span id="eyma"><b id="p1hx">Smart Rendering</b></span>", as our grid now
needs to be smart enough to know which records to draw and which of them should be put off.<br id="mzrq"><br id="a11r">There are two variants of <span id="fk9j"><b id="xxy:">Smart Rendering</b></span> in <span id="d6p:"><b id="uff8">dhtmlxGrid</b></span>:<br id="ws83"><ul id="lu1k"><li id="py:s">You just turn Smart Rendering on and load the entire dataset with <span id="nszk"><i id="ao7w">loadXML(...)</i></span>
method. This way is easy and doesn't require any server side support but... (as there are always some "buts"). If you load 100,000 records at once, they will take some memory
of your computer. Not a big deal, but still it can affect the performance. What is more, this variant is available <span id="ytzd"><b id="wrtj">only </b></span>for Grid Professional Edition users. <br id="ezb1"></li><li id="rcba">You put the dataset into your browser by portions (dynamic loading). Grid will tell you what portion it needs (start and end record index). <br id="ekkx"></li></ul><br id="ekpl">
Thus, for the first variant the format of XML remains the same as common grid, and it generally can be a static XML file:<br id="xe5-">
<blockquote id="eeef">&lt;rows&gt;<br id="fez:">
&nbsp;&nbsp;&nbsp; &lt;row id="xx"&gt;<br id="jmzd">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;cell&gt;<br id="b2kv">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br id="i2ck">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/cell&gt;<br id="cvsh">
&nbsp;&nbsp;&nbsp; &lt;/row&gt;<br id="pjsg">
&lt;/rows&gt;<br id="azd1">
</blockquote>
For the variant with dynamic loading it gets two additional parameters
and (as far as we should process some incoming arguments) needs to be
created dynamically with some server side programming language:<br id="t-bt">
<blockquote id="c.qe">&lt;rows <span id="zwex"><b id="u42e">total_count="x" pos="y"</b></span>&gt;<br id="fez:">

&nbsp;&nbsp;&nbsp; &lt;row id="xx"&gt;<br id="jmzd">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;cell&gt;<br id="b2kv">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br id="i2ck">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/cell&gt;<br id="cvsh">

&nbsp;&nbsp;&nbsp; &lt;/row&gt;<br id="pjsg">

&lt;/rows&gt;<br id="iyfr">
</blockquote>
Thus, this tutorial is not just about JavaScript, but also about server side a little. I'll show you server side code for PHP, ASP, JSP, ColdFusion. But let's do everything in its turn. <br id="ybsr">By the way, if some of the readers can send me necessary code for some other languages/technologies, I'll definitely put it here with big gratitude to the author.<br id="pfuc"><h2 id="izaf">Step 1. Include script and CSS files into the page</h2>And again we start with including external JavaScript and CSS files into the page. In addition to the files we included in the previous chapter we'll use Smart Rendering extension to work with large amounts of data but still keep the grid fast. So additional file is <span id="t3n3"><b id="ufqe">ext/dhtmlxgrid_srnd.js</b></span>:<br id="zm3v"><blockquote id="yswu">&lt;link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css"&gt;<br id="hge2">
  &lt;script src="codebase/dhtmlxcommon.js"&gt;&lt;/script&gt;<br id="ubjr">
  &lt;script src="codebase/dhtmlxgrid.js"&gt;&lt;/script&gt;<br id="q0b2">
  &lt;script src="codebase/dhtmlxgridcell.js"&gt;&lt;/script&gt;<br id="cs.e"><span id="xwa7"><b id="gzma">
  &lt;script src="codebase/ext/dhtmlxgrid_srnd.js"&gt;&lt;/script&gt;</b></span><br id="kqrb">&lt;script&gt;<br id="kyb:">&nbsp;&nbsp;&nbsp; var gridQString = "";//we'll save here the last url with query string we used for loading grid (see step 5 for details)<br id="m5-x">&nbsp;&nbsp;&nbsp; //we'll use this script block for functions<br id="vwyu">&lt;/script&gt;<br id="dmi2"></blockquote><h2 id="e2fx">Step 2. Initialization of Grid with Smart Rendering</h2>Depending on the data structure you'll need a grid with different columns set. I have 4 columns in the database table - unique ID (id), some name (nm), related alphanumeric code (code) and numeric value (num_val) (You can get the sql file <a title="here" href="http://sampledb_for_big_grid.sql" id="t2qp">here</a>. It contains only 5,000 records to minimize its size). <br id="ab-g"><br id="qty1">This is an abstract sample, but we can think about those names as the names of some pharmaceuticals (it is not in reason to expect them to be something else), the codes will be their internal product codes, and numeric values will be the prices. So initialization code for such kind of a grid will be as follows:<br id="d79b">&nbsp;&nbsp;&nbsp; <br id="q758"><blockquote id="h4g.">
  <p id="uku_">&lt;div id="products_grid" style="width:500px;height:200px;"&gt;&lt;/div&gt;<br id="t76q">
&lt;script&gt;<br id="rlvw">
&nbsp;&nbsp;&nbsp; var mygrid = new dhtmlXGridObject('products_grid');
  </p>
  <p id="ir86">&nbsp;&nbsp;&nbsp; mygrid.setImagePath("codebase/imgs/");
  </p>
  <p id="ww6y">&nbsp;&nbsp;&nbsp; mygrid.setHeader("Product Name,Internal Code,Price");
  </p>
  <p id="n_sw">&nbsp;&nbsp;&nbsp; mygrid.setInitWidths("*,150,150");
  </p>
  <p id="dz5z">&nbsp;&nbsp;&nbsp; mygrid.setColAlign("left,left,right");</p><p id="dz5z">&nbsp;&nbsp;&nbsp; mygrid.setSkin("modern");</p>
  <p id="zr4m">&nbsp;&nbsp;&nbsp; mygrid.init();</p><p id="zr4m">&nbsp;&nbsp;&nbsp;&nbsp;<span id="ia1b"><b id="w-et">mygrid.enableSmartRendering(true);</b></span><br id="rwju"></p><p id="zr4m">&lt;/script&gt;</p>
</blockquote>

    
    
As you probably remember from the previous chapter, I used body "onload" event to call grid initialization function. The code mentioned above is another case as it calls script methods on the page placing them after DIV container we want to place our grid into. The goal here is the same: to call the grid constructor after the DIV container was initialized.<br id="uxor"><br id="z-7q">So what is new in this script? A new line of code was added to enable Smart Rendering. As you see it is quite simple: just one command and you are ready to load thousands of records. Very simple indeed.<br id="wxj_"><br id="roph">So here is what we have now: <br id="ti0k"><div id="mmwn" style="padding: 1em 0pt; text-align: left;"><img id="mw3i" style="width: 504px; height: 204px;" src="images/dcbhphmh_13c73cv7vk_b.gif"><br id="e27d"><br id="l-ip"><h2 id="m0sa">Step 3. Loading Data. Server side support for Smart Rendering</h2><br id="by7-">As you already know (if you've read the Introduction) there are two variants of <span id="x34p"><b id="l5.d">Smart Rendering</b></span> in <span id="c51d"><b id="ciuq">dhtmlxGrid</b></span>. We'll concentrate on more complex one, which allows you working with much bigger datasets. I mean <span id="s-gq"><b id="w752">Smart Rendering with Dynamic Loading</b></span>.  <br id="o683"><br id="jj-s">Below there are samples of server side code for creating an output XML based on incoming arguments and MySQL database for 4 most popular technologies. Load your variant of file with the following command (put it into script block right after <span id="ia1b"><i id="lwjb">mygrid.enableSmartRendering</i></span>):<br id="v9fg"><blockquote id="ecpy">gridQString = "getGridRecords.php";//save query string to global variable (see step 5 for details)<br id="eu4q">mygrid.loadXML(gridQString );<br id="v348"></blockquote>Sending the request to the URL you specify inside <span id="my.5"><b id="yg8b">loadXML</b></span> method, grid adds two properties:<br id="elmb"><br id="wmiu"><ul id="rm3y"><li id="lez_">posStart - starting position of record in the dataset (if this property was skipped, then it returns records from the beginning of the dataset);</li><li id="kdqy">count - number of records to be returned with XML.</li></ul><br id="r6sg">Thus GET request which comes to the server will look something like this: <span id="gv1o"><i id="qwl4">getGridRecords.php?posStart=199&amp;count=100 .<br id="nea1"><br id="wp8q"></i></span><h3 id="xg8n"><span id="gv1o">Sample of server-side code. PHP.</span></h3><h3 id="z6p7"></h3><blockquote id="jsea">&lt;?php<br id="xh2c">&nbsp;&nbsp;&nbsp; //set content type and xml tag<br id="lqaj">&nbsp;&nbsp;&nbsp; header("Content-type:text/xml");<br id="hx35">&nbsp;&nbsp;&nbsp; print("&lt;?xml version=\"1.0\"?&gt;");<br id="i58_">&nbsp;&nbsp;&nbsp; <br id="mz51">&nbsp;&nbsp;&nbsp; //define variables from incoming values<br id="j:_s">&nbsp;&nbsp;&nbsp;&nbsp;if(isset($_GET["posStart"]))<br id="rdnm">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $posStart = $_GET['posStart'];<br id="ml:c">&nbsp;&nbsp;&nbsp; else<br id="moy0">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $posStart = 0;<br id="c1wq">&nbsp;&nbsp;&nbsp; if(isset($_GET["count"]))<br id="a8rw">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $count = $_GET['count'];<br id="dbp2">&nbsp;&nbsp;&nbsp; else<br id="qz5b">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $count = 100;<br id="djqr">&nbsp;&nbsp;&nbsp; <br id="lt3x">&nbsp;&nbsp;&nbsp; //connect to database<br id="kgzm">&nbsp;&nbsp;&nbsp; $link = mysql_pconnect("localhost", "user", "pwd");<br id="ciw9">&nbsp;&nbsp;&nbsp; $db = mysql_select_db ("sampleDB");<br id="h:8i">&nbsp;&nbsp;&nbsp; <br id="buw3">&nbsp;&nbsp;&nbsp;&nbsp;//create query to products table<br id="ptjs">&nbsp;&nbsp;&nbsp; $sql = "SELECT&nbsp; * FROM products";<br id="qznu">&nbsp;&nbsp;&nbsp; <br id="vn6v">&nbsp;&nbsp;&nbsp; //if this is the first query - get total number of records in the query result<br id="s87b">&nbsp;&nbsp;&nbsp; if($posStart==0){<br id="b85q">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $sqlCount = "Select count(*) as cnt from ($sql) as tbl";<br id="owep">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $resCount = mysql_query ($sqlCount);<br id="fd2z">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $rowCount=mysql_fetch_array($resCount);<br id="vlxo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$totalCount = $rowCount["cnt"];<br id="s83r">&nbsp;&nbsp;&nbsp;&nbsp;}<br id="b5j1">&nbsp;&nbsp;&nbsp; <br id="oofn">&nbsp;&nbsp;&nbsp;&nbsp;//add limits to query to get only rows necessary for the output<br id="kyfc">&nbsp;&nbsp;&nbsp; $sql.= " LIMIT ".$posStart.",".$count;<br id="h6pa">&nbsp;&nbsp;&nbsp; <br id="mlf5">&nbsp;&nbsp;&nbsp; //query database to retrieve necessary block of data<br id="u3jh">&nbsp;&nbsp;&nbsp;&nbsp;$res = mysql_query ($sql);<br id="c.mg"><br id="rodw">&nbsp;&nbsp;&nbsp; //output data in XML format &nbsp;&nbsp; <br id="mkyg">&nbsp;&nbsp;&nbsp; print("&lt;rows total_count='".$totalCount."' pos='".$posStart."'&gt;"); &nbsp;&nbsp; <br id="hwhq">&nbsp;&nbsp;&nbsp; while($row=mysql_fetch_array($res)){<br id="gkdp">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print("&lt;row id='".$row['id']."'&gt;");<br id="azn2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("&lt;cell&gt;");<br id="x50a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print($row['nm']);&nbsp;  //value for product name<br id="zhuw">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("&lt;/cell&gt;");<br id="mpsf">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("&lt;cell&gt;");<br id="uo-e">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print($row['code']);&nbsp; //value for internal code  <br id="c_zc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("&lt;/cell&gt;");<br id="g9v1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print("&lt;cell&gt;");<br id="lf78">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print($row['num_val']);&nbsp;&nbsp;&nbsp; //value for price<br id="gk2j">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("&lt;/cell&gt;");<br id="fhei">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; print("&lt;/row&gt;");<br id="vtht">&nbsp;&nbsp;&nbsp; }<br id="ldg8">&nbsp;&nbsp;&nbsp; print("&lt;/rows&gt;");<br id="g016">?&gt;<br id="jm.a"><br id="tmm7">* - sample code was simplified to concentrate you on the main commands. Some necessary error handlers etc. were omitted.<br id="amk2"></blockquote></div><h3 id="u5u:">Sample of server side code. JSP.</h3><blockquote id="jfqd">&lt;%@ page import = "java.sql.*" %&gt;<br id="tygl">&lt;%<br id="a52v">&nbsp;&nbsp;&nbsp; String db_ipp_addr = "localhost";<br id="wntk">&nbsp;&nbsp;&nbsp; String db_username = "root";<br id="ucnk">&nbsp;&nbsp;&nbsp; String db_password = "1";<br id="fzds">&nbsp;&nbsp;&nbsp; String db_name = "sampleDB";<br id="y_g.">&nbsp;&nbsp;&nbsp; <br id="q-4h">&nbsp;&nbsp;&nbsp; // set content type and xml tag<br id="o8pi">&nbsp;&nbsp;&nbsp; response.setContentType("text/xml");<br id="z22g">&nbsp;&nbsp;&nbsp; out.println("&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;"); <br id="zl03"><br id="ng:b">&nbsp;&nbsp;&nbsp; // define variables from incoming values<br id="podw">&nbsp;&nbsp;&nbsp; String posStart = "";<br id="xinq">&nbsp;&nbsp;&nbsp; if (request.getParameter("posStart") != null){<br id="th5n">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; posStart = request.getParameter("posStart");<br id="cxyh">&nbsp;&nbsp;&nbsp; }else{<br id="bp2e">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; posStart = "0";<br id="b3of">&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; <br id="h8q7">&nbsp;&nbsp;&nbsp; <br id="p4zq">&nbsp;&nbsp;&nbsp; String count = "";<br id="kq3s">&nbsp;&nbsp;&nbsp; if (request.getParameter("count") != null){<br id="aglr">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; count = request.getParameter("count");<br id="wb6l">&nbsp;&nbsp;&nbsp; }else{<br id="suyi">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; count = "100";&nbsp;&nbsp;&nbsp; <br id="z65t">&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; <br id="j51e">&nbsp;&nbsp;&nbsp; <br id="r:.a">&nbsp;&nbsp;&nbsp; // connect to database<br id="lv-v">&nbsp;&nbsp;&nbsp; Connection connection = null; <br id="zmkm">&nbsp;&nbsp;&nbsp; Statement statement = null; <br id="la0t">&nbsp;&nbsp;&nbsp; ResultSet rs = null; <br id="crel">&nbsp;&nbsp;&nbsp; String connectionURL = "jdbc:mysql://" + db_ipp_addr + ":3306/" + db_name;<br id="uxc2">&nbsp;&nbsp;&nbsp; <br id="ippr">&nbsp;&nbsp;&nbsp; Class.forName("com.mysql.jdbc.Driver").newInstance(); <br id="ibr6">&nbsp;&nbsp;&nbsp; connection = DriverManager.getConnection(connectionURL, db_username, db_password); <br id="f2db"><br id="rrn.">&nbsp;&nbsp;&nbsp; // query to products table<br id="vpdy">&nbsp;&nbsp;&nbsp; String sql = "SELECT&nbsp; * FROM products";<br id="odaz"><br id="ibiy">&nbsp;&nbsp;&nbsp; // if this is the first query - get total number of records in the query result<br id="aeps">&nbsp;&nbsp;&nbsp; String totalCount = "";<br id="om::">&nbsp;&nbsp;&nbsp; if (posStart.equals("0")){<br id="brwz">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; String sqlCount = "Select count(*) as cnt from (" + sql + ") as tbl";<br id="k07.">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; statement = connection.createStatement(); <br id="j1ww">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; rs = statement.executeQuery(sqlCount); <br id="yrpc">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; rs.next();<br id="xjmd">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; totalCount = rs.getString("cnt");<br id="n1dq">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; rs.close();<br id="bkdo">&nbsp;&nbsp;&nbsp; } else {<br id="b2is">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; totalCount = "";<br id="jrav">&nbsp;&nbsp;&nbsp; }<br id="g..o"><br id="khoi">&nbsp;&nbsp;&nbsp; // add limits to query to get only rows necessary for output<br id="unxl">&nbsp;&nbsp;&nbsp; sql += " LIMIT " + posStart + "," + count;<br id="gsyg"><br id="zks9">&nbsp;&nbsp;&nbsp; // Execute the query<br id="k40w">&nbsp;&nbsp;&nbsp; statement = connection.createStatement(); <br id="cpvc">&nbsp;&nbsp;&nbsp; rs = statement.executeQuery(sql); <br id="a7yl">&nbsp;&nbsp;&nbsp; <br id="wcq6">&nbsp;&nbsp;&nbsp; // output data in XML format&nbsp;&nbsp; <br id="u_8d">&nbsp;&nbsp;&nbsp; out.println("&lt;rows total_count='" + totalCount + "' pos='" + posStart + "'&gt;");<br id="ct0u">&nbsp;&nbsp;&nbsp; while (rs.next()) {<br id="nb-4">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println("&lt;row id='" + rs.getString("id") + "'&gt;");<br id="uedv">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println("&lt;cell&gt;");<br id="e6s6">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println(rs.getString("nm"));&nbsp; // value for product name<br id="w3r7">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println("&lt;/cell&gt;");<br id="hmud">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println("&lt;cell&gt;");<br id="lf1c">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println(rs.getString("code")); // value for internal code<br id="qe2h">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println("&lt;/cell&gt;");<br id="qqgw">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println("&lt;cell&gt;");<br id="p6sm">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println(rs.getString("num_val"));&nbsp;&nbsp; // value for price<br id="wp9g">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println("&lt;/cell&gt;");<br id="n9s_">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; out.println("&lt;/row&gt;");<br id="f2s1">&nbsp;&nbsp;&nbsp; }<br id="dbuu">&nbsp;&nbsp;&nbsp; out.write("&lt;/rows&gt;");<br id="kide">&nbsp;&nbsp;&nbsp; rs.close(); <br id="ww1.">%&gt;<br id="ira2"></blockquote><h3 id="e6ht">Sample of server side code. ASP</h3><blockquote id="pl3k">&lt;%@ LANGUAGE = VBScript %&gt;<br id="ivuw">&lt;% option explicit %&gt;<br id="zghg"><br id="j3cx">&lt;%<br id="lmhy">&nbsp;&nbsp;&nbsp; Dim db_ipp_addr, db_username, db_password, db_name<br id="oiq4">&nbsp;&nbsp;&nbsp; db_ipp_addr = "localhost"<br id="cbgu">&nbsp;&nbsp;&nbsp; db_username = "root"<br id="kdm4">&nbsp;&nbsp;&nbsp; db_password = "1"<br id="tid0">&nbsp;&nbsp;&nbsp; db_name = "sampleDB"<br id="t8j5">&nbsp;&nbsp;&nbsp; <br id="rg0r">&nbsp;&nbsp;&nbsp; ' set content type and xml tag<br id="j.2e">&nbsp;&nbsp;&nbsp; Response.ContentType = "text/xml"<br id="ok9j">&nbsp;&nbsp;&nbsp; Response.write("&lt;?xml version=""1.0"" encoding=""UTF-8""?&gt;")<br id="t5.a"><br id="o3k-">&nbsp;&nbsp;&nbsp; ' define variables from incoming values<br id="nau6">&nbsp;&nbsp;&nbsp; Dim posStart, count<br id="w19-">&nbsp;&nbsp;&nbsp; If not isEmpty(Request.QueryString("posStart")) Then<br id="dxfa">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; posStart = Request.QueryString("posStart")<br id="sysg">&nbsp;&nbsp;&nbsp; Else<br id="hnfu">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; posStart = 0<br id="xamx">&nbsp;&nbsp;&nbsp; End If&nbsp;&nbsp;&nbsp; <br id="j0_j"><br id="q:y7">&nbsp;&nbsp;&nbsp; If not isEmpty(Request.QueryString("count")) Then<br id="k-:t">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; count = Request.QueryString("count")<br id="wad7">&nbsp;&nbsp;&nbsp; Else<br id="l536">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; count = 100<br id="f1vo">&nbsp;&nbsp;&nbsp; End If&nbsp;&nbsp;&nbsp; <br id="tlr_">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br id="t0-3">&nbsp;&nbsp;&nbsp; ' connect to database<br id="bpuy">&nbsp;&nbsp;&nbsp; Dim objConnection, rs, connString, sql<br id="qjzb">&nbsp;&nbsp;&nbsp; Set objConnection = Server.CreateObject("ADODB.Connection")<br id="c06y">&nbsp;&nbsp;&nbsp; Set rs = Server.CreateObject("ADODB.Recordset")<br id="jjhg">&nbsp;&nbsp;&nbsp; connString = "DRIVER={MySQL ODBC 3.51 Driver}; SERVER=" &amp; db_ipp_addr &amp; "; DATABASE=" &amp; db_name &amp; "; UID=" &amp; db_username &amp; "; PWD=" &amp; db_password<br id="c2gu">&nbsp;&nbsp;&nbsp; objConnection.Open connString<br id="wxw-">&nbsp;&nbsp;&nbsp; <br id="j5wh">&nbsp;&nbsp;&nbsp; <br id="qk8b">&nbsp;&nbsp;&nbsp; ' query to products table<br id="k5l4">&nbsp;&nbsp;&nbsp; sql = "SELECT&nbsp; * FROM products"<br id="how3"><br id="w4h5">&nbsp;&nbsp;&nbsp; ' if this is the first query - get total number of records in the query result<br id="hd13">&nbsp;&nbsp;&nbsp; Dim sqlCount, totalCount<br id="u5e2">&nbsp;&nbsp;&nbsp; If posStart = 0 Then<br id="wesp">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; sqlCount = "Select count(*) as cnt from (" &amp; sql &amp; ") as tbl"<br id="m07o">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; rs.Open sqlCount, objConnection<br id="kdck">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; totalCount = rs("cnt")<br id="oqwr">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; rs.Close<br id="bptk">&nbsp;&nbsp;&nbsp; Else <br id="s6sz">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; totalCount = ""&nbsp;&nbsp;&nbsp; <br id="wthj">&nbsp;&nbsp;&nbsp; End If<br id="r4hb"><br id="t9ag">&nbsp;&nbsp;&nbsp; ' add limits to query to get only rows necessary for output<br id="e.xw">&nbsp;&nbsp;&nbsp; sql = sql &amp; " LIMIT " &amp; posStart &amp; "," &amp; count<br id="rqer"><br id="u:r9">&nbsp;&nbsp;&nbsp; ' Execute the query<br id="hgie">&nbsp;&nbsp;&nbsp; rs.Open sql, objConnection<br id="d1nx">&nbsp;&nbsp;&nbsp; <br id="uip7">&nbsp;&nbsp;&nbsp; ' output data in XML format&nbsp;&nbsp; <br id="xqqo">&nbsp;&nbsp;&nbsp; Response.write("&lt;rows total_count='" &amp; totalCount &amp; "' pos='" &amp; posStart &amp; "'&gt;")<br id="yia8">&nbsp;&nbsp;&nbsp; Do while not rs.EOF <br id="bigd">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write("&lt;row id='" &amp; rs("id") &amp; "'&gt;")<br id="h_51">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write("&lt;cell&gt;")<br id="h_nv">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write(rs("nm"))&nbsp; ' value for product name<br id="pvj8">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write("&lt;/cell&gt;")<br id="z.t5">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write("&lt;cell&gt;")<br id="a1ms">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write(rs("code"))&nbsp; ' value for internal code<br id="sm:j">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write("&lt;/cell&gt;")<br id="crsr">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write("&lt;cell&gt;")<br id="ktwj">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write(rs("num_val"))&nbsp;&nbsp;&nbsp; ' value for price<br id="rs-g">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write("&lt;/cell&gt;")<br id="gxrl">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Response.write("&lt;/row&gt;")<br id="e2ry">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; rs.MoveNext<br id="dhxj">&nbsp;&nbsp;&nbsp; Loop<br id="l4g_">&nbsp;&nbsp;&nbsp; Response.write("&lt;/rows&gt;")<br id="cznp">&nbsp;&nbsp;&nbsp; rs.Close<br id="x06e">&nbsp;&nbsp;&nbsp; Set rs = Nothing<br id="dsob">&nbsp;&nbsp;&nbsp; objConnection.Close<br id="dvqt">&nbsp;&nbsp;&nbsp; Set objConnection = Nothing<br id="gelv">%&gt;<br id="pfip"></blockquote><br id="a1l7"><h3 id="zilc">Sample of server side code. Cold Fusion.</h3><blockquote id="mw6o">&lt;cfset dsn = "sampleDB"&gt;<br id="jfax">&lt;cfsetting&nbsp; enablecfoutputonly="yes"&gt;<br id="ozvw"><br id="g6gw">&lt;!--- set content type and xml tag ---&gt;<br id="wbz2">&lt;cfcontent reset="yes" type="text/xml; charset=UTF-8"&gt;&lt;cfoutput&gt;&lt;?xml version="1.0"?&gt;&lt;/cfoutput&gt;<br id="b4gp"><br id="repn">&nbsp;&nbsp;&nbsp; &lt;!---&nbsp;&nbsp;&nbsp; define variables from incoming values ---&gt;<br id="bio7">&nbsp;&nbsp;&nbsp; &lt;cfif isDefined("url.posStart")&gt;<br id="d9vt">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfset posStart = url.posStart&gt;<br id="ei40">&nbsp;&nbsp;&nbsp; &lt;cfelse&gt;<br id="sdo7">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfset posStart = 0&gt;<br id="ur:5">&nbsp;&nbsp;&nbsp; &lt;/cfif&gt;&nbsp;&nbsp;&nbsp; <br id="ss8x"><br id="fhuf">&nbsp;&nbsp;&nbsp; &lt;cfif isDefined("url.count")&gt;<br id="gi30">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfset count = url.count&gt;<br id="ar_s">&nbsp;&nbsp;&nbsp; &lt;cfelse&gt;<br id="qmka">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfset count = 100&gt;<br id="eggz">&nbsp;&nbsp;&nbsp; &lt;/cfif&gt;&nbsp;&nbsp;&nbsp; <br id="p18_"><br id="vyv3">&nbsp;&nbsp;&nbsp; &lt;!--- if this is the first query - get total number of records in the query result ---&gt;<br id="k88b">&nbsp;&nbsp;&nbsp; &lt;cfif posStart eq 0&gt;<br id="ruym">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfquery datasource="#dsn#" name="getCount"&gt;<br id="a_35">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Select count(*) as cnt <br id="rfa5">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; FROM products<br id="ge48">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/cfquery&gt;<br id="plra">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfset totalCount = getCount.cnt&gt;<br id="apcp">&nbsp;&nbsp;&nbsp; &lt;cfelse&gt;<br id="j9yh">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;Cfset totalCount = ""&gt;&nbsp;&nbsp;&nbsp; <br id="r-h:">&nbsp;&nbsp;&nbsp; &lt;/cfif&gt;<br id="a7r4"><br id="oj:w">&nbsp;&nbsp;&nbsp; &lt;!--- query to products table ---&gt;<br id="mm5i">&nbsp;&nbsp;&nbsp; &lt;cfquery datasource="#dsn#" name="getRecords"&gt;<br id="ig7y">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; SELECT&nbsp; * <br id="ytjw">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; FROM products<br id="kfea">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;!--- add limits to query to get only rows necessary for output ---&gt;<br id="sp2e">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; LIMIT #posStart#, #count#<br id="v4ol">&nbsp;&nbsp;&nbsp; &lt;/cfquery&gt;<br id="fvu2">&nbsp;&nbsp;&nbsp; <br id="x5qy">&nbsp;&nbsp;&nbsp; &lt;!--- output data in XML format&nbsp;&nbsp; ---&gt;<br id="seqe">&nbsp;&nbsp;&nbsp; &lt;cfoutput&gt;&lt;rows total_count="#totalCount#" pos="#posStart#"&gt;&lt;/cfoutput&gt;&nbsp;&nbsp; <br id="v-ia">&nbsp;&nbsp;&nbsp; &lt;cfloop query="getRecords"&gt;<br id="i9-b">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfoutput&gt;&lt;row id="#getRecords.id#"&gt;&lt;/cfoutput&gt;<br id="yjlz">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;!--- value for product name ---&gt;<br id="qche">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfoutput&gt;&lt;cell&gt;#getRecords.nm#&lt;/cell&gt;&lt;/cfoutput&gt;<br id="zwmo">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;!--- value for internal code ---&gt;<br id="xl6c">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfoutput&gt;&lt;cell&gt;#getRecords.code#&lt;/cell&gt;&lt;/cfoutput&gt;<br id="l5ot">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;!--- value for price ---&gt;<br id="o:ra">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfoutput&gt;&lt;cell&gt;#getRecords.num_val#&lt;/cell&gt;&lt;/cfoutput&gt;<br id="ct2y">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;cfoutput&gt;&lt;/row&gt;&lt;/cfoutput&gt;<br id="r:.l">&nbsp;&nbsp;&nbsp; &lt;/cfloop&gt;<br id="sp56">&nbsp;&nbsp;&nbsp; &lt;cfoutput&gt;&lt;/rows&gt;&lt;/cfoutput&gt;<br id="smh0"></blockquote><br id="ehnk"><p id="p09i"><br id="b0y3"></p><p id="p09i">After loading the file the grid will look something like in the picture below. When you stop scrolling the grid will load and draw a new portion of records.<br id="v1on"></p><p id="kos."></p><div id="a2do" style="padding: 1em 0pt; text-align: left;"><img id="b2yv" style="width: 504px; height: 204px;" src="images/dcbhphmh_14gwg3wwfw_b.gif"></div><br id="wkx9"><p id="vjh5"></p><h2 id="reaw">Step 4. Filtering. Passing additional parameters to server side<br id="usg0"></h2>Why do you think you need additional parameters and why am I talking about them together with Smart Rendering? There are two situations which come to my mind right away:<br id="fnm0"><br id="frnh"><ul id="dcuo"><li id="qntf">Filtering data;</li><li id="q:jc">Server side sorting (client side sorting kills all advantages of Smart Rendering, so you'd better move sorting to the server side. I'll tell you how to do this in Step 5).</li></ul><br id="x4_k">Let's add the possibility to filter grid data by product name mask. Put the following code right before the DIV container we used for grid initialization:<br id="b5ij"><br id="ahq4"><blockquote id="tj:_">&lt;input type="Text" id="nm_mask"&gt;<br id="yoy1">&lt;input type="Button" value="Filter" onclick="applyFilter()"&gt;<br id="fn65"></blockquote>As you see, clicking the "Filter" button we call <span id="x194"><i id="wv_.">applyFilter </i></span>function, which doesn't exist as we haven't created it yet. Let's do it now. I<span id="vbtz" style="background-color: rgb(255, 255, 255);">t will contain the magic of getting the content for grid based on additional parameter :)</span><br id="f8x1"><blockquote id="smrt">function applyFilter(){<br id="osyl">&nbsp;&nbsp;&nbsp; mygrid.clearAll(); //remove all data<br id="rg9p">&nbsp;&nbsp;&nbsp; gridQString = "getGridRecords.php?name_mask="+document.getElementById("nm_mask").value;//save query string in global variable (see step 5 for details)<br id="ufz3">&nbsp;&nbsp;&nbsp; mygrid.loadXML(gridQString); // load new dataset from sever with additional parameter passed<br id="djaz">}<br id="ii7:"></blockquote>Put it into the script block we left for functions (or any other - it doesn't matter).<br id="bx:a">Now <span id="hdrh"><i id="lfay">getGridRecords </i></span>file gets additional parameter named <span id="bpir"><i id="mhkc">name_mask,</i></span> which you can add to the query to filter the results by name. For example (PHP):<br id="ud-2"><br id="i8v4"><blockquote id="oay2">&nbsp;&nbsp;&nbsp;&nbsp;//query to products table<br id="p4l2">&nbsp;&nbsp;&nbsp; $sql = "SELECT&nbsp; * FROM products";<br id="zgsz">&nbsp;&nbsp;&nbsp; if(isset($_GET["name_mask"]))<br id="gv:t">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $sql.=" Where nm like '".$_GET["name_mask"]."%'";<br id="h3cy"></blockquote><h2 id="rz3s">Step 5. Server Side Sorting.</h2>When we have 50,000 records in grid or just going to have but do not really have (as we work with Smart Rendering, <span id="s11l"><b id="h_vq">with Dynamic Loading</b></span>) client side sorting will not help a lot. Our grid just doesn't know all the values yet. So we need to move sorting to server side. How? Just relax. It is really simple.<br id="z5v8"><br id="db51">There will be 3 stages of the plan:<br id="vnsz"><ol id="aaba"><li id="s93j">Cancel client side sorting;</li><li id="e.zx">Clear grid and load the data sorted on server side;</li><li id="e.zx">Set position and direction of a marker in the grid header to show sorting direction.</li></ol><br id="a_ok">To cancel client side sorting we need to enable sorting for the columns first. Like it was described in the previous tutorial, you can do this with <span id="kzjb"><i id="y3ym">setColSorting </i></span>method, but the sorting type for all three columns will be "server":<br id="ue.2"><blockquote id="v52g">mygrid.setColSorting("server,server,server");<br id="e03s"></blockquote>The "server" sorting type means nothing for sorting routine of the grid, so it'll just ignore it. This information is mostly for myself as column sorting was moved to server side. Put this command somewhere before <span id="m0yd"><i id="dcum">mygrid.init() .</i></span><br id="xd9t">Now we are ready to execute stages 1 and 2 of the plan. We'll do this with <span id="iyi3"><b id="ixbe">onBeforeSorting </b></span>event handler. First let's define the handler function. According to <a target="_blank" title="events documentation" href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/doc/events.html#grid_api_ev" id="k:ik">events documentation</a> it gets 3 incoming arguments:<br id="ug5c"><ul id="a:b2"><li id="ucgp">Column index;</li><li id="pf1p">Grid object;</li><li id="pf1p">Sorting direction (asc for ASC, des for DESC).</li></ul><br id="uzy7">And this function will work IN PROFESSIONAL EDITION of the grid. <span id="ivsp"><b id="dt5d">Only</b></span>. Sorry, from now on only those who "got the tickets" go further...<br id="b6_l">&nbsp;<br id="wj7f">OK, if you are still reading, here is the complete code for the event handler function. Put it into the script block we've left for functions (or in any other one):<br id="a9.r"><br id="sx.3"><blockquote id="nfkw">&nbsp;&nbsp;&nbsp;&nbsp;function sortGridOnServer(ind,gridObj,direct){<br id="iuyg">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; mygrid.clearAll();<br id="ydw7">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; mygrid.loadXML(gridQString+(gridQString.indexOf("?")&gt;=0?"&amp;":"?")+"orderby="+ind+"&amp;direct="+direct);<br id="aabg">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; mygrid.setSortImgState(true,ind,direct);<br id="sn1v">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return false;<br id="plxo">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br id="b-po"></blockquote>The above mentioned code does the following:<br id="p8gu"><br id="zr-0"><ol id="rfss"><li id="zasc">Removes all rows from grid;</li><li id="ymmb">Loads new content passing column index as <span id="c4q5"><i id="md4x">orderby </i></span>parameter and order direction (asc for ASC or des for DESC) as <span id="t-id"><i id="ov_r">direct </i></span>parameter. Here it becomes clear why we needed to save gridQString in the previous steps - because we need to sort exactly the same content which we got last time we loaded grid.</li><li id="ymmb">Sets Sort Image visible for the column we sort and with the direction we need.</li><li id="ymmb"><span id="iyi3">Cancels client side sorting </span>by returning "false" from event handler function for <span id="iyi3"><b id="kc4x">onBeforeSorting </b></span><span id="iyi3">event</span><span id="iyi3">. This is what we meant in point 1 of the plan.</span></li></ol><br id="yld5">Now when we have sortGridOnServer function, we can add the following command to set the event handler to grid initialization script:<br id="todx"><blockquote id="c4lh">mygrid.attachEvent("onBeforeSorting",sortGridOnServer);<br id="q:tr"></blockquote>Server side changes are simple, as we just add <span id="a7ns"><i id="n:xh">Order by</i></span> statement for the field in table that corresponds to a column in grid, and set the direction: ASC if asc, DESC if des. <br id="kfvp">Here is a code sample for PHP:<br id="rra:"><blockquote id="svfp">&nbsp;&nbsp;&nbsp;&nbsp;//order by<br id="o3jp">&nbsp;&nbsp;&nbsp; $columns = array("nm","code","num_val");<br id="l:1j">&nbsp;&nbsp;&nbsp; if(isset($_GET["orderby"])){<br id="dal3">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if($_GET["direct"]=='des')<br id="yiff">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $direct = "DESC";<br id="pj-v">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; else&nbsp;&nbsp;&nbsp; <br id="qrbu">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $direct = "ASC";<br id="zjg2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $sql.=" Order by ".$columns[$_GET["orderby"]]." ".$direct;<br id="e6jr">&nbsp;&nbsp;&nbsp; }<br id="lg-e"></blockquote><br id="ottv"><a title="Download elated files" target="_blank" href="dhtmlxgrid_sbs_biggrid.zip" id="yrk2">Download related files</a> <br id="l6gp"><br id="br20">



<div class="copyright" zid="223">&copy; DHTMLX, 2008</div>

</body>
</html>
